<template>
  <div id="table1">
    <table>
      <thead>
      <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
      </thead>
      <tbody>
      <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
      <tr><td>  4</td><td>  5</td><td>  6</td><td>  7</td></tr>
      <tr><td>  8</td><td>  9</td><td> 10</td><td> 11</td></tr>
      <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "custom",
  metaInfo: {
    title: "实验",
  },
  data: function() {
    return {
      data: []
    }
  },
  created() {
  },
  mounted() {
    d3
        .select("#table1")  // 选中 id 为 table1 的元素
        .selectAll("table")  // 选中所有 table
        .selectAll("tbody tr")  // 选中所有 tbody 中的 tr
        .selectAll("td")  // 选中所有 td
        .style("color", (d, i) => i === 1 ? "red" : null)  // 将所有组的第一个 td 设置成红色
  }
}
</script>

<style scoped>

</style>
